﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create a custom editor for each jqxTreeGrid cell.
    </title>
    <meta name="description" content="Property Editor - JavaScript Tree Grid Demo | jQWidgets">     
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript">
        function getTextElementByColor(color) {
            if (color == 'transparent' || color.hex == "") {
                return $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>transparent</div>");
            }

            var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>#" + color.hex + "</div>");
            var nThreshold = 105;
            var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
            var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
            element.css('color', foreColor);
            element.css('background', "#" + color.hex);
            element.addClass('jqx-rc-all');
            return element;
        }

        $(document).ready(function () {
            var data = [
                {
                    "property": "Name", "value": "jqxTreeGrid", type: "string"              
                },
                {
                    "property": "Location", "value": "0, 0", type: "string", children: [{ "property": "X", "value": "0", type: "number" }, { "property": "Y", "value": "0", type: "number" }]
                },
                {
                    "property": "Size", "value": "200, 200", type: "string", children: [{ "property": "Width", "value": "200", type: "number" }, { "property": "Height", "value": "200", type: "number" }]
                },
                {
                    "property": "Background", "value": "#4621BC", type: "color"
                },
                {
                    "property": "Color", "value": "#B1B11B", type: "color"
                },
                {
                    "property": "Alignment", "value": "Left", type: "align"
                },
                {
                    "property": "Enabled", "value": "true", type: "bool"
                }
            ];

            var source =
             {
                 dataType: "json",
                 dataFields: [
                      { name: "property", type: "string" },
                      { name: "value", type: "string" },
                      { name: "type", type: "string" },
                      { name: "children", type: "array" }
                 ],
                 hierarchy:
                     {
                         root: "children"
                     },
                 localData: data
             };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {

                }
            });


           $("#treeGrid").on('cellValueChanged', function (event) {
               // Update the Location and Size properties and their nested properties.
               var args = event.args;
               var row = args.row;
               var records = row.records;
               // update the nested properties when a parent value is changed.
               if (records.length > 0) {
                   var values = args.value.split(',');
                   for (var i = 0; i < values.length; i++) {
                       var value = $.trim(values[i]);
                       var rowKey = $("#treeGrid").jqxTreeGrid('getKey', records[i]);
                       $("#treeGrid").jqxTreeGrid('setCellValue', rowKey, 'value', value);
                   }
               }
               // update the parent value when the user changes a nested property, 
               else if (row.level == 1) {
                   var parent = row.parent;
                   var parentRowKey = $("#treeGrid").jqxTreeGrid('getKey', parent);
                   var value = "";
                   var records = parent.records;
                   if (records.length > 0) {
                       for (var i = 0; i < records.length; i++) {
                           var rowKey = $("#treeGrid").jqxTreeGrid('getKey', records[i]);
                           var cellValue = $("#treeGrid").jqxTreeGrid('getCellValue', rowKey, 'value');
                           value += cellValue;
                           if (i < records.length - 1) {
                               value += ", ";
                           }
                       }
                   }

                   $("#treeGrid").jqxTreeGrid('setCellValue', parentRowKey, 'value', value);
               }
           });

           $("#treeGrid").jqxTreeGrid(
           {
              source: dataAdapter,
              altRows: true,
              autoRowHeight: false,
              editSettings: { saveOnPageChange: true, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true },
              editable: true,
              columns: [
               { text: 'Property Name', editable: false, columnType: 'none', dataField: 'property', width: 200 },
               {
                   text: 'Value', dataField: 'value', width: 230, columnType: "custom",
                   // creates an editor depending on the "type" value.
                   createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
                       var row = $("#treeGrid").jqxTreeGrid('getRow', rowKey);
                       switch (row["type"]) {
                           case "string":
                           case "number":
                               var input = $("<input class='textbox' style='border: none;'/>").appendTo(editor);
                               input.jqxInput({ width: '100%', height: '100%' });
                               break;
                           case "align":
                               var dropDownList = $("<div class='dropDownList' style='border: none;'></div>").appendTo(editor);
                               dropDownList.jqxDropDownList({width: '100%', height: '100%', autoDropDownHeight: true, source: ["Left", "Center", "Right"] });
                               break;
                           case "color":
                               var dropDownButton = $("<div style='border: none;'><div style='padding: 5px;'><div class='colorPicker" + rowKey + "'></div></div></div>");
                               dropDownButton.appendTo(editor);
                               dropDownButton.jqxDropDownButton({ width: '100%', height: '100%' });
                               var colorPicker = $($.find(".colorPicker" + rowKey));
                               colorPicker.jqxColorPicker({ width: 220, height: 220 });
                               colorPicker.on('colorchange', function (event) {
                                   dropDownButton.jqxDropDownButton('setContent', getTextElementByColor(event.args.color));
                               });
                               dropDownButton.jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
                               break;
                           case "bool":
                               var checkbox = $("<div style='margin-top: 6px; margin-left: -8px; left: 50%; position: relative;' class='checkbox'/>").appendTo(editor);
                               checkbox.jqxCheckBox({ checked: cellvalue });
                               break;
                       }
                   },
                   // updates the editor's value.
                   initEditor: function (rowKey, cellvalue, editor, celltext, width, height) {
                       var row = $("#treeGrid").jqxTreeGrid('getRow', rowKey);
                       switch (row.type) {
                           case "string":
                           case "number":
                               $(editor.find('.textbox')).val(cellvalue);
                               break;
                           case "align":
                               $(editor.find('.dropDownList')).val(cellvalue);
                               break;
                           case "color":
                               $($.find('.colorPicker' + rowKey)).val(cellvalue);
                               break;
                           case "bool":
                               $(editor.find('.checkbox')).val(cellvalue);
                               break;
                       }
                   },
                   // returns the value of the custom editor.
                   getEditorValue: function (rowKey , cellvalue, editor) {
                       var row = $("#treeGrid").jqxTreeGrid('getRow', rowKey);

                       switch (row.type) {
                           case "string":
                             return $(editor.find('.textbox')).val();
                           case "number":
                               var number = parseFloat($(editor.find('.textbox')).val());
                               if (isNaN(number)) {
                                   return 0;
                               }
                               else return number;
                           case "align":
                             return $(editor.find('.dropDownList')).val();
                           case "color":
                             return $($.find('.colorPicker' + rowKey)).val();
                           case "bool":
                               return $(editor.find('.checkbox')).val();
                       }
                       return "";
                   }
               }
              ]
          });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid"></div>
</body>
</html>
